<template>
  <view class="main">
    <view class="topTitle">
      <view class="tag">
        <!-- <u-tag text="健康知识一点通" bgColor="#715AFF"></u-tag> -->
        <view class="utag">
          健康知识一点通
        </view>
        <text>疑难杂症我<text class="iconfont icon-shejiaotubiao-10"></text>道</text>
      </view>
      <view class="h1 titleH1">
        {{knowledgeData.DiseName}}
      </view>
      <view class="h2 ht">
        数据来源：互联网
      </view>
    </view>
    <view v-if="JSON.stringify(knowledgeData) !== '{}'" class="main-body">
      <view>
        <view class="intro h1">
          简介
        </view>
        <view class="h2">
          intro
        </view>
        <view class="h3">
          {{knowledgeData.intro}}
        </view>
      </view>
      <view>
        <view class="symptom h1">
          症状
        </view>
        <view class="h2">
          symptom
        </view>
        <view class="h3">
          {{knowledgeData.symptom}}
        </view>
      </view>
      <view class="">
        <view class="pathogenesis h1">
          病因
        </view>
        <view class="h2">
          pathogenesis
        </view>
        <view class="h3">
          {{knowledgeData.pathogenesis}}
        </view>
      </view>
      <view class="">
        <view class="diagnosis h1">
          诊断
        </view>
        <view class="h2">
          diagnosis
        </view>
        <view class="h3">
          {{knowledgeData.dlagnosls}}
        </view>
      </view>
      <view>
        <view class="cure h1">
          治疗
        </view>
        <view class="h2">
          cure
        </view>
        <view class="h3">
          {{knowledgeData.cure}}
        </view>
      </view>
      <view>
        <view class="health h1">
          保健
        </view>
        <view class="h2">
          health
        </view>
        <view class="h3">
          {{knowledgeData.health}}
        </view>
      </view>
    </view>
    <view v-else class="">
      <template>
        <u-skeleton
            rows="6"
            title
          loading
        ></u-skeleton>
        <view class="skeletonSon">
          <u-skeleton
              rows="3"
              title
            loading
          ></u-skeleton>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  onLoad : async function (data) {
    console.log(data);
    let {data: res} = await this.$http.get('/art/artIndex', {params: {index: data.index}})
		this.knowledgeData = res
  },
  data () {
    return {
      knowledgeData: ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .topTitle {
    margin: 30rpx 0 0 0;
    padding: 0 30rpx 30rpx 30rpx;
    border-bottom: 2rpx solid #f1f1f1;
    .titleH1 {
      margin-bottom: 15rpx;
    }
    .tag {
      display: flex;
      align-items: center;
      position: relative;
      // width: 230rpx;
      margin-bottom: 30rpx;
      .utag {
        width: 250rpx;
        height: 45rpx;
        line-height: 45rpx;
        border-radius: 4rpx;
        background-color: #715AFF;
        color: #fff;
        text-align: center;
        font-size: 28rpx
      }
      >text {
        // position: absolute;
        display: inline-block;
        // left: 225rpx;
        font-size: 26rpx;
        width: 280rpx;
        top: -1px;
        background-color: #F6F4FF;
        color: #A28FFF;
        text-align: center;
        padding: 6rpx 0;
        z-index: -1;
        border-radius: 10rpx;
      }
      .icon-shejiaotubiao-10 {
        font-size: 42rpx;
      }
    }
  }
  .ht {
    color: #A3A3A3;
  }
  .main-body {
    padding: 20rpx;
    padding-top: 0rpx;
    >view {
      margin-top: 20rpx;
    }
    .h1 {
      font-family: "宋体";
      font-size: 46rpx;
      font-weight: 600;
      background: linear-gradient(to right, #FE7300 10rpx, transparent 10rpx) no-repeat;
    }
    .h2 {
      text-transform: uppercase;
      color: #c1c1c1;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }
    .h3 {
      color: #828282;
			line-height: 1.4;
    }
  }
</style>

